<!--
 * @Description: 函数作用说明
 * @Author: zdq
 * @Date: 2024-12-11 22:34:48
 * @LastEditTime: 2024-12-16 23:22:30
 * @LastEditors: zdq
 * @Reference: 
-->
<script setup lang="ts">
  import { useUpdatePriceForm } from './services'
  import { ref, watch } from 'vue'
  import { FormInstance } from 'element-plus'

  const { form, submitLoading, reset, submit } = useUpdatePriceForm()

  const formRef = ref<FormInstance | null>(null)

  const props = defineProps<{
    priceForm: {
      id: string
      orderSettlePrice: number
    }
  }>()

  watch(
    props,
    (value) => {
      form.value.orderSettlePrice = value.priceForm.orderSettlePrice
      form.value.oldOrderSettlePrice = value.priceForm.orderSettlePrice
    },
    { immediate: true, deep: true },
  )

  defineExpose({
    form,
    submitLoading,
    submit: async (id: string) => {
      if (!formRef.value) {
        return null
      }
      try {
        await formRef.value.validate()
        const res = await submit(id)
        return res
      } catch (error) {
        return null
      }
    },
    reset: () => {
      if (!formRef.value) {
        return null
      }
      formRef.value.resetFields()
      reset()
    },
  })
</script>

<template>
  <el-form ref="formRef" class="modal_form_content" :model="form" label-position="top">
    <el-form-item label="工单结算价（旧）" label-width="140px">
      <div class="item">
        <span>¥</span>
        <el-input-number
          v-model.trim="form.oldOrderSettlePrice"
          placeholder="请输入"
          :precision="2"
          :controls="false"
          :min="0"
          :disabled="true"
        ></el-input-number>
      </div>
    </el-form-item>
    <el-form-item label="工单结算价（新）" label-width="140px">
      <div class="item">
        <span>¥</span>
        <el-input-number
          v-model.trim="form.orderSettlePrice"
          placeholder="请输入"
          :precision="2"
          :controls="false"
          :min="0"
        ></el-input-number>
      </div>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
  .item {
    display: flex;
    align-items: center;
    gap: 5px;
    :deep(.el-input__inner) {
      text-align: left;
    }
  }
  .modal_form_content {
    padding: 0 !important;
    .el-form-item {
      display: flex;
      align-items: center;
    }
  }
</style>
